<template>
	<div class="jiangshan">
		
		<div class="home_body_banner" ref='bannerHeight'>
			<img src="../../../../static/img/images/wd_ewm1.jpg" />
		</div>
		<div class="yuan " ref='imgHeight'>
			<div class="jiang_logo clear2" ref='logoHeight'>
				<img src="../../../../static/img/images/logo.jpg"   />
			</div>
			<div class="jiang_body" :style="{'min-height':minHeight+'px'}">
				<img src="../../../../static/img/images/yuanbj.jpg" class="jiang_body_bj" />
				<div class="jiang_body_yuan clear2" ref='yuan' :style="{'height':yuanWidth+'px'}">
					<div class="jiang_body_yuanDiv"></div>	
					<div @click="zhuan(0)" class="jiang_body_yuanDiv jiang_body_yuanDivactive flex flex_flow align_center justify_cen">
						<img :src="imgList[0].img2" />
						<p>{{imgList[0].name}}</p>
					</div>	
					<div class="jiang_body_yuanDiv"></div>	
					<div @click="zhuan(3)" class="jiang_body_yuanDiv flex flex_flow align_center justify_cen">
						<img :src="imgList[3].img1" />
						<p>{{imgList[3].name}}</p>
					</div>	
					<div @click="jump" class="jiang_body_yuanDiv jiang_body_yuanDivZc flex flex_flow align_center justify_cen">
						<img src="../../../../static/img/images/yuan5_2.png" />
						<p>注册</p>
					</div>	
					<div  @click="zhuan(1)" class="jiang_body_yuanDiv flex flex_flow align_center justify_cen">
						<img :src="imgList[1].img1" />
						<p>{{imgList[1].name}}</p>
					</div>	
					<div class="jiang_body_yuanDiv"></div>	
					<div  @click="zhuan(2)" class="jiang_body_yuanDiv flex flex_flow align_center justify_cen">
						<img :src="imgList[2].img1" />
						<p>{{imgList[2].name}}</p>
					</div>	
					<div class="jiang_body_yuanDiv"></div>	
					
				</div>
			</div>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from '../../common/footer2.vue';
	export default {
		components:{
            vFooter
        },
		data: function() {
			
			return {
				bodyHeight:0,
				yuanWidth:0,
				imgHeight:0,
				minHeight:0,
				imgList:[{
					'img1':'../../../../static/img/images/yuan1_1.png',
					'img2':'../../../../static/img/images/yuan1_2.png',
					'name':'主名店',
				},{
					'img1':'../../../../static/img/images/yuan2_1.png',
					'img2':'../../../../static/img/images/yuan2_2.png',
					'name':'辅名店',
				},{
					'img1':'../../../../static/img/images/yuan3_1.png',
					'img2':'../../../../static/img/images/yuan3_2.png',
					'name':'良品店',
				},{
					'img1':'../../../../static/img/images/yuan4_1.png',
					'img2':'../../../../static/img/images/yuan4_2.png',
					'name':'同城店',
				}]
				
			}
		},
		mounted() {
			this.bodyHeight=document.body.offsetHeight;
			setTimeout(()=>{
				this.yuanWidth=this.$refs.yuan.offsetWidth
				this.imgHeight=this.$refs.imgHeight.offsetHeight;
				this.minHeight=document.body.offsetHeight-this.$refs.bannerHeight.offsetHeight-this.$refs.logoHeight.offsetHeight-50;
		
			},0)
			setTimeout(()=>{
				this.minHeight=document.body.offsetHeight-this.$refs.bannerHeight.offsetHeight-this.$refs.logoHeight.offsetHeight-50;
			},100)
        	
		},
		methods: {
			jump(key){
				this.$router.push({
        			path: '/Jregister',
				})
			},
			zhuan(type){
				let html_list=[];
				if(parseInt(type)==0){
					return false;
				}
				switch(parseInt(type)){
					case 1:
						html_list.push(this.imgList[1]);
						html_list.push(this.imgList[2]);
						html_list.push(this.imgList[3]);
						html_list.push(this.imgList[0]);
						break;
					case 2:
						html_list.push(this.imgList[2]);
						html_list.push(this.imgList[3]);
						html_list.push(this.imgList[0]);
						html_list.push(this.imgList[1]);
						break;
					case 3:
						html_list.push(this.imgList[3]);
						html_list.push(this.imgList[0]);
						html_list.push(this.imgList[1]);
						html_list.push(this.imgList[2]);
						break;
				}
				this.imgList=html_list
			}
			
		}
	}
</script>

<style scoped>
	.home_body_banner{
		width: 100%;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.yuan{
		width: 100%;
		overflow: hidden;
		margin-bottom: 50px;
	}
	.jiang_logo{
		width: 95%;
	    margin: 0 auto;
	    padding: 0 2.5%;
	    background: #fff;
	}
	.jiang_logo img{
		display: block;
	    float: left;
	    height: 4rem;
	    margin-left: -0.3rem;
	}
	.jiang_body{
		width: 100%;
		position: relative;
		background: url('../../../../static/img/images/yuanbj.jpg') repeat-y;
		background-size: 100%;
	}
	.jiang_body_bj{
		width: 100%;
		display: block;
	}
	.jiang_body_yuan{
		width: 66%;
		position: absolute;
		top: 50%;
		left: 50%;
		background: url('../../../../static/img/images/yuan.png') no-repeat;
		background-size: 100%;
		z-index: 1;
		transform: translate(-50%,-50%);
	}
	
	.jiang_body_yuanDiv{
		width: 33%;
		height: 33%;
		float: left;
	}
	.jiang_body_yuanDiv:nth-child(3n-1){
		margin: 0 0.5%;
	}
	.jiang_body_yuanDiv img{
		display: block;
		width: 30%;
		margin: 0 auto;
	}
	.jiang_body_yuanDiv p{
		font-size: 1.3rem;
		color: #ababab;
		text-align: center;
		line-height: 2.5rem;
	}
	.jiang_body_yuanDivactive p{
		color: #f7bd40;
	}
	.jiang_body_yuanDivZc img{
		width: 40%;
	}
	.jiang_body_yuanDivZc p{
		font-size: 1.8rem;
		line-height: 3rem;
		font-weight: bold;
		color: #f7bd40;
	}
</style>